<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="stylesheet" href="layui/css/layui.css">

    <!-- Vendor CSS (Icon Font) -->

    <link rel="stylesheet" href="front/css/fontawesome.min.css">
    <link rel="stylesheet" href="front/css/pe-icon-7-stroke.min.css">


    <!-- Plugins CSS (All Plugins Files) -->


    <link rel="stylesheet" href="front/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="front/css/animate.min.css">
    <link rel="stylesheet" href="front/css/lightgallery.min.css">
    <link rel="stylesheet" href="front/css/aos.min.css">
    <link rel="stylesheet" href="front/css/nice-select.min.css">


    <!-- Main Style CSS -->
    <link rel="stylesheet" href="front/css/style.css">


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
<link rel="stylesheet" href="assets/css/style.min.css"> 
-->
</head>

<body>
<div class="header section">

    <!-- Header Top Start -->
    <div class="header-top bg-primary">
        <div class="container">
            <div class="row align-items-center">

                <!-- Header Top Message Start -->
                <div class="col-12">
                    <div class="header-top-msg-wrapper text-center">
                        <p class="header-top-message text-center">最高50%折扣 <strong>冬季</strong> 系列 <a href="page/shoppage" class="btn btn-hover-dark btn-secondary">立即购买</a></p>
                        <div class="header-top-close-btn">
                            <button class="top-close-btn"><i class="pe-7s-close"></i></button>
                        </div>
                    </div>
                </div>
                <!-- Header Top Message End -->
            </div>
        </div>
    </div>
    <!-- Header Top End -->

    <!-- Header Bottom Start -->
    <div class="header-bottom">
        <div class="header-sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- Header Logo Start -->
                    <div class="col-md-6 col-lg-3 col-xl-2 col-6">
                        <div class="header-logo">
                            <a href="page/shoppage"><img src="front/picture/logo.png" alt="Site Logo"></a>
                        </div>
                    </div>
                    <!-- Header Logo End -->

                    <!-- Header Menu Start -->
                    <div class="col-lg-6 d-none d-lg-block">

                        <div class="main-menu">
                            <ul>
                                <li class="has-children">
                                    <a href="page/index">首页</a>
                                </li>
                                <li class="has-children position-static">
                                    <a href="page/shoppage">购物</a>
                                </li>
                                <li><a href="page/about">关于我们</a></li>
                                <li><a href="page/contact">联系我们</a></li>
                            </ul>
                        </div>

                    </div>
                    <!-- Header Menu End -->

                    <!-- Header Action Start -->
                    <div class="col-md-6 col-lg-3 col-xl-4 col-6 justify-content-end">
                        <div class="header-actions">
                            <div class="dropdown-user d-none d-lg-block">
                                <a href="page/account" class="header-action-btn"><i class="pe-7s-user"></i></a>
                            </div>
                            <a href="page/wishlist" class="header-action-btn header-action-btn-wishlist">
                                <i class="pe-7s-like"></i>
                            </a>
                            <a href="page/cart" class="header-action-btn header-action-btn-cart">
                                <i class="pe-7s-cart"></i>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button Start -->
                            <a href="javascript:void(0)" class="header-action-btn header-action-btn-menu d-lg-none d-md-block">
                                <i class="fa fa-bars"></i>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button End -->

                        </div>
                    </div>
                    <!-- Header Action End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Header Bottom End -->

    <!-- Offcanvas Search Start -->
    <div class="offcanvas-search">
        <div class="offcanvas-search-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="pe-7s-close"></i>
            </div>
            <!-- Button Close End -->

            <!-- Offcanvas Search Form Start -->
            <form class="offcanvas-search-form" action="#">
                <input type="text" placeholder="Search Product..." class="offcanvas-search-input">
            </form>
            <!-- Offcanvas Search Form End -->

        </div>
    </div>
    <!-- Offcanvas Search End -->

</div>
<!-- Header Section End -->


    <!-- Breadcrumb Section Start -->
    <div class="section">

        <!-- Breadcrumb Area Start -->
        <div class="breadcrumb-area bg-primary">
            <div class="container">
                <div class="breadcrumb-content">
                    <ul>
                        <li>
                            <a href="index.html"><i class="fa fa-home"></i> </a>
                        </li>
                        <li class="active"> 我的账户 页面</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Breadcrumb Area End -->

    </div>
    <!-- Breadcrumb Section End -->

    <!-- My Account Section Start -->
    <div class="section section-margin">
        <div class="container">

            <div class="row">
                <div class="col-lg-12">

                    <!-- My Account Page Start -->
                    <div class="myaccount-page-wrapper">
                        <div class="row">

                            <!-- My Account Tab Menu Start -->
                            <div class="col-lg-3 col-md-4">
                                <div class="myaccount-tab-menu nav" role="tablist">
                                    <a href="#dashboad" class="active" data-bs-toggle="tab"><i class="fa fa-dashboard"></i>
                                        控制面板</a>
                                    <a href="#orders" data-bs-toggle="tab"><i class="fa fa-cart-arrow-down"></i> 订单</a>
                                    <a href="#address-edit" data-bs-toggle="tab"><i class="fa fa-map-marker"></i> 地址</a>
                                    <a href="#account-info" data-bs-toggle="tab"><i class="fa fa-user"></i> 账户详情</a>
                                    <a href="login.html" id="logout"><i class="fa fa-sign-out"></i> 退出登录</a>
                                </div>
                            </div>
                            <!-- My Account Tab Menu End -->

                            <!-- My Account Tab Content Start -->
                            <div class="col-lg-9 col-md-8">
                                <div class="tab-content" id="myaccountContent">

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade show active" id="dashboad" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">控制面板</h3>
                                            <div class="welcome">
                                                <p>您好, <strong id="dashboadname">Alex Aya</strong></p>
                                            </div>
                                            <p class="mb-0">从您的账户控制面板，您可以轻松检查和查看您最近的订单，管理您的送货和账单地址，以及编辑您的密码和帐户详细信息。</p>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="orders" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">订单</h3>
                                            <div class="myaccount-table table-responsive text-center">
                                                <table class="table table-bordered">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>状态</th>
                                                            <th>详情</th>
                                                            <th>总价</th>
                                                            <th>创建日期</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="orderlist">


                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->


                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="address-edit" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">账单地址</h3>
                                            <div class="layui-tab layui-tab-card">

                                                <ul class="layui-tab-title" id="tab-title">
                                                    <!-- 选项卡标题将动态生成 -->
                                                </ul>
                                                <div class="layui-tab-content" style="height: 200px;" id="tab-content">
                                                    <!-- 选项卡内容将动态生成 -->
                                                </div>
                                            </div>
                                            <button id="addaddress" type="button" class="layui-btn layui-btn-sm"  style="background-color: #00c4cc">新增</button>
                                        </div>
                                    </div>
                                    <!-- Single Tab Content End -->

                                    <!-- Single Tab Content Start -->
                                    <div class="tab-pane fade" id="account-info" role="tabpanel">
                                        <div class="myaccount-content">
                                            <h3 class="title">账户详情</h3>
                                            <div class="account-details-form">
                                                <form action="#">
                                                    <div class="single-input-item mb-3">
                                                        <label class="required mb-1">头像</label>
                                                        <img id="addupload" src="front/picture/morentouxiang.png" style="width: 100px; height: 100px; cursor: pointer;" onclick="openFileChooser()">
                                                        <input type="hidden" id="addimgurl" value="headimgurl">
                                                        <!-- 新增一个文件输入框，用于选择文件 -->
                                                        <input type="file" id="fileInput" style="display: none;">
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="single-input-item mb-3">
                                                                <label class="required mb-1">用户名</label>
                                                                <input id="username" type="text" placeholder="用户名">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="single-input-item mb-3">
                                                        <label class="required mb-1">电话号码</label>
                                                        <input id="phone" type="text" placeholder="电话号码">
                                                    </div>
                                                    <fieldset>
                                                        <legend>修改密码</legend>
                                                        <div class="single-input-item mb-3">
                                                            <label for="current-pwd" class="required mb-1">当前密码</label>
                                                            <input type="password" id="current-pwd" placeholder="当前密码">
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item mb-3">
                                                                    <label for="new-pwd" class="required mb-1">新密码</label>
                                                                    <input type="password" id="new-pwd" placeholder="新密码">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="single-input-item mb-3">
                                                                    <label for="confirm-pwd" class="required mb-1">确认新密码</label>
                                                                    <input type="password" id="confirm-pwd" placeholder="确认新密码">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                    <div class="single-input-item single-item-button">
                                                        <button id="editusersave" type="button" class="btn btn btn-dark btn-hover-primary rounded-0">保存</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div> <!-- Single Tab Content End -->

                                </div>
                            </div>
                            <!-- My Account Tab Content End -->

                        </div>
                    </div>
                    <!-- My Account Page End -->

                </div>
            </div>

        </div>
    </div>
    <!-- My Account Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-primary section-padding">
            <div class="container">
                <div class="row mb-n8">
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">About Us</h1>
                            <p class="desc-content">We are a team of designers and developers that create high quality wordpress, shopify, Opencart</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start mb-n2">
                                <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                                <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                                <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                                <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                                <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Contact Us</h2>
                            <ul class="contact-links">
                                <li><i class="pe-7s-home"></i> <span>Your address goes here</span> </li>
                                <li><i class="pe-7s-mail"></i><a href="mailto:info@example.com"> info@example.com</a></li>
                                <li><i class="pe-7s-call"></i><a href="tel:+012-3456-789"> +012 3456 789</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget aos-init aos-animate">
                            <h2 class="widget-title">Information</h2>
                            <ul class="widget-list">
                                <li><a href="contact.html">Terms & Conditions</a></li>
                                <li><a href="contact.html">Payment Methode</a></li>
                                <li><a href="contact.html">Product Warranty</a></li>
                                <li><a href="contact.html">Return Process</a></li>
                                <li><a href="contact.html">Payment Security</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Signup for newsletter</h2>
                            <div class="widget-body">
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap pt-1">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box mb-4" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">Subscribe</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                                <p class="desc-content mb-0">Join over 1,000 people who get free and fresh content delivered automatically each time we publish</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-secondary pt-4 pb-4">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-center">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->


    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="pe-7s-close"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">
                <!-- Mobile Menu Search Box Start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                        <button class="search-btn"><i class="pe-7s-search"></i></button>
                    </form>
                </div>
                <!-- Mobile Menu Search Box End -->

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                    <li><a href="index-3.html">Home Three</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="shop.html">Shop Grid</a></li>
                                    <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                    <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                    <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                    <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                    <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                    <li><a href="wishlist.html">Wishlist</a></li>
                                    <li><a href="cart.html">Shopping Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="compare.html">Compare</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="single-product.html">Single Product</a></li>
                                    <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                    <li><a href="single-product-group.html">Single Product Group</a></li>
                                    <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                    <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                    <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                    <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                    <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                    <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                    <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                    <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                    <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="error-404.html">Error 404</a></li>
                                    <li><a href="">My Account</a></li>
                                    <li><a href="login.html">Loging | Register</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Language, Currency & Link Start -->
                <div class="offcanvas-lag-curr mb-6">
                    <div class="header-top-lan-curr-link">
                        <div class="header-top-lan dropdown">
                            <h4 class="title">Language:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">English</a></li>
                                <li><a class="dropdown-item" href="#">Japanese</a></li>
                                <li><a class="dropdown-item" href="#">Arabic</a></li>
                                <li><a class="dropdown-item" href="#">Romanian</a></li>
                            </ul>
                        </div>
                        <div class="header-top-curr dropdown">
                            <h4 class="title">Currency:</h4>
                            <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">USD</a></li>
                                <li><a class="dropdown-item" href="#">Pound</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Language, Currency & Link End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget Ende -->
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner Wrapper End -->

        </div>
        <!-- Mobile Menu Inner End -->
    </div>
    <!-- Mobile Menu End -->
    <!--新增数据表单-->
    <div id="addAddressForm" style="display: none;">
        <form id="addressForm" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-inline">
                    <input type="text" name="receivername" required lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-inline">
                    <input type="text" name="receiverphone" required lay-verify="required" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">省</label>
                <div class="layui-input-inline">
                    <!-- 修改为下拉框 -->
                    <select name="receiverprovince" id="provinceSelect" lay-filter="test1" lay-verify="required">
                        <option value="">请选择省份</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">市</label>
                <div class="layui-input-inline">
                    <!-- 修改为下拉框 -->
                    <select name="receivercity" id="citySelect" lay-filter="test2" lay-verify="required" disabled>
                        <option value="">请选择城市</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区</label>
                <div class="layui-input-inline">
                    <!-- 修改为下拉框 -->
                    <select name="receiverdistrict" id="districtSelect" lay-verify="required" disabled>
                        <option value="">请选择区域</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="receiveraddress" required lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" lay-submit lay-filter="saveAddress" class="layui-btn" style="background-color: #00c4cc">保存</button>
            </div>
        </form>
    </div>

    <!-- Scripts -->
    <script src="layui/layui.all.js"></script>
    <script type="text/html" id="orderitem">
        <tr>
            <td class="status">已支付</td>
            <td class="info">Aug 22, 2018</td>
            <td class="price">Pending</td>
            <td class="date">$3000</td>
            <td><a type="button" class="btn btn btn-dark btn-hover-primary btn-sm rounded-0 vieworder">View</a></td>
            <input type="hidden" class="orderid" value="orderid">
        </tr>
    </script>
    <script>
        const $ = layui.$;
        const form=layui.form;
        loadAddresses();
        // 加载地址数据
        function loadAddresses() {
            $.ajax({
                url: 'receiveraddress/get',
                success: function (result) {
                    $('#tab-title').empty();
                    $('#tab-content').empty();
                    console.log(result);
                    result.forEach((item, index) => {
                        const tabTitle = `<li class="${index === 0 ? 'layui-this' : ''}">${index + 1}</li>`;
                        $('#tab-title').append(tabTitle);

                        const tabContent = `
                    <div class="layui-tab-item ${index === 0 ? 'layui-show' : ''}">
                        <p>收货人: ${item.receivername}</p>
                        <p>电话: ${item.receiverphone}</p>
                        <p>地址: ${item.receiverprovince} ${item.receivercity} ${item.receiverdistrict} ${item.receiveraddress}</p>

                        <button type="button" class="delete-btn layui-btn layui-btn-sm" data-id="${item.id}"  style="background-color: #00c4cc">删除</button>
                        <label style="display: flex; align-items: center; margin-top: 10px;">
                            <input type="radio" name="defaultAddress" class="default-radio" data-id="${item.id}" style="display: inline-block; margin-right: 5px;" ${item.isdefault === 1 ? 'checked' : ''}>
                            设为默认
                        </label>

                    </div>
                `;
                        $('#tab-content').append(tabContent);
                    });

                    layui.use('element', function () {
                        var element = layui.element;
                        element.init();
                    });
                }
            });
        }
        $(document).ready(function () {
            // 绑定点击删除按钮
            $(document).on('click', '.delete-btn', function () {
                const addressId = $(this).data('id');
                deleteAddress(addressId);
            });
            // 绑定点击 设为默认
            $(document).on('change', '.default-radio', function () {
                const addressId = $(this).data('id');
                setDefaultAddress(addressId);
            });

            // 绑定新增按钮的点击事件
            $(document).on('click', '#addaddress', function () {
                console.log('新增按钮被点击');
                layer.open({
                    type:1,
                    title:'新增',
                    area:['400px','400px'],
                    content:$("#addAddressForm")
                });
            });
            //退出登录
            $('#logout').click(function(e) {
                e.preventDefault();
                $.ajax({
                    url: 'user/logout',
                    success: function() {
                        window.location.href = 'page/login';
                    },
                    error: function(xhr) {
                        console.error('退出失败:', xhr.statusText);
                        window.location.href = 'page/login';
                    }
                });
            });
        });
        //生成历史订单
        $.ajax({
            url:'orders/get',
            success:function(result){
                console.log(result);
                $('#orderlist').empty(); // 清空原有订单列表
                result.forEach(order => {
                    let $newRow = $('#orderitem').html()
                        .replace('已支付', order.status)
                        .replace('Pending', order.payment)
                        .replace('$3000', order.createtime)
                        .replace('value="orderid"',`value="${order.id}"`);
                    // 处理订单详情
                    let orderDetailsText = '';
                    order.orderdetailslist.forEach(detail => {
                        orderDetailsText += `${detail.thatproname} × ${detail.quantity}  `;
                    });
                    $newRow = $newRow.replace('Aug 22, 2018', orderDetailsText);
                    $('#orderlist').append($newRow);
                });
            }
        });

        //查看订单按钮
        $('#orderlist').on('click','.vieworder',function(){
            const orderId=Number($(this).closest('tr').find('.orderid').val());
            console.log(orderId);
            $.ajax({
                url:'orders/getOrder',
                data:{orderid:orderId},
                success:function(result){
                    console.log(result);
                    if(result.status==="已生成订单"){
                        location.href='page/checkout?orderid='+orderId;
                    }else if(result.status==="未支付"){
                        location.href='page/payment?id='+orderId;
                    }else{
                        location.href='page/order?orderid='+orderId;
                    }
                }
            });
        });

        // 获取省市区数据
        function getDistricts(keywords) {
            return $.ajax({
                url: `https://restapi.amap.com/v3/config/district?key=d5e466c74f37e2b1f89163a68a161ea7&keywords=${keywords}&subdistrict=3`,
                dataType: 'json'
            });
        }



        // 初始化省份下拉框
        function initProvinceSelect() {
            getDistricts('中国').done(function (result) {
                const provinces = result.districts[0].districts;
                const provinceSelect = $('#provinceSelect');
                provinces.forEach(province => {
                    provinceSelect.append(`<option value="${province.name}">${province.name}</option>`);
                });
                layui.form.render('select');
            });
        }

        // 监听省份选择改变事件
        form.on('select(test1)', function (data) {
            const provinceAdcode = data.value;
            const citySelect = $('#citySelect');
            const districtSelect = $('#districtSelect');

            if (provinceAdcode) {
                getDistricts(provinceAdcode).done(function (result) {
                    const cities = result.districts[0].districts;
                    citySelect.empty().append('<option value="">请选择城市</option>');
                    districtSelect.empty().append('<option value="">请选择区域</option>');
                    cities.forEach(city => {
                        citySelect.append(`<option value="${city.name}">${city.name}</option>`);
                    });
                    citySelect.prop('disabled', false);
                    districtSelect.prop('disabled', true);
                    form.render('select');
                });
            } else {
                citySelect.empty().append('<option value="">请选择城市</option>');
                districtSelect.empty().append('<option value="">请选择区域</option>');
                citySelect.prop('disabled', true);
                districtSelect.prop('disabled', true);
                form.render('select');
            }
        });

        // 监听城市选择改变事件
        form.on('select(test2)', function (data) {
            const cityAdcode = data.value;
            const districtSelect = $('#districtSelect');

            if (cityAdcode) {
                getDistricts(cityAdcode).done(function (result) {
                    const districts = result.districts[0].districts;
                    districtSelect.empty().append('<option value="">请选择区域</option>');
                    districts.forEach(district => {
                        districtSelect.append(`<option value="${district.name}">${district.name}</option>`);
                    });
                    districtSelect.prop('disabled', false);
                    form.render('select');
                });
            } else {
                districtSelect.empty().append('<option value="">请选择区域</option>');
                districtSelect.prop('disabled', true);
                form.render('select');
            }
        });

        // 初始化省份下拉框
        initProvinceSelect();

        // 删除地址
        function deleteAddress(addressId) {
            if (confirm('确定要删除该地址吗？')) {
                $.ajax({
                    url: 'receiveraddress/delete',
                    data: {id:addressId },
                    success: function (response) {
                        if (response.success) {
                            loadAddresses(); // 重新加载地址
                            alert('地址已删除');
                        } else {
                            alert('删除失败，请重试');
                        }
                    }
                });
            }
        }

        // 设置默认地址
        function setDefaultAddress(addressId) {
            console.log(addressId);
            $.ajax({
                url: 'receiveraddress/edit',
                data: {isdefault:0},
                success: function () {
                    $.ajax({
                        url: 'receiveraddress/edit',
                        data: {id:addressId,isdefault:1},
                        success: function () {
                            loadAddresses();
                        }
                    });
                }
            });
        }

        // 绑定保存按钮的点击事件
        layui.use('form', function () {
            var form = layui.form;
            form.on('submit(saveAddress)', function (data) {
                var formData = data.field;
                formData.isdefault=0;
                $.ajax({
                    url: 'receiveraddress/add',
                    data: formData,
                    success:function(){
                        layer.closeAll();
                        loadAddresses();
                    }
                });
                return false; // 阻止表单默认提交
            });
        });

        //上传图片
        function openFileChooser() {
            document.getElementById('fileInput').click();
        }
        document.getElementById('fileInput').addEventListener('change', function() {
            console.log($('#addimgurl').val());
            const file = this.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('file', file);

                // 发送 AJAX 请求上传图片
                fetch('/file/upload', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        // 根据后端数据结构，正确解析图片 URL
                        if (data.data && data.data.length > 0) {
                            const imgUrl = data.data[0].src;
                            document.getElementById('addupload').src = imgUrl;
                            document.getElementById('addimgurl').value = imgUrl;
                        } else {
                            console.error('返回的数据格式无效:', data);
                        }
                    })
                    .catch(error => {
                        console.error('上传图片时出错:', error);
                    });
            }
            console.log($('#addimgurl').val());
        });


        //生成用户信息
        $.ajax({
            url: 'user/get',
            success: function (result) {
                $('#dashboadname').text(result.username);
                $('#addupload').attr("src",result.headpicture);
                $('#username').val(result.username);
                $('#phone').val(result.phone);
            }
        });
        //保存用户信息
        $('#editusersave').on('click', function () {
            const username = $('#username').val().trim();
            const phone = $('#phone').val().trim();
            const currentPwd = $('#current-pwd').val().trim();
            const newPwd = $('#new-pwd').val().trim();
            const confirmPwd = $('#confirm-pwd').val().trim();
            const imgUrl = $('#addimgurl').val();

            // 验证用户名和电话号码非空
            if (!username || !phone) {
                layer.msg('用户名和电话号码不能为空');
                return;
            }

            // 验证用户名和电话号码符合规范
            const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!usernameRegex.test(username)) {
                layer.msg('用户名必须由 3 到 20 位的字母、数字或下划线组成');
                return;
            }
            if (!phoneRegex.test(phone)) {
                layer.msg('电话号码格式不正确');
                return;
            }

            if (!currentPwd && !newPwd && !confirmPwd) {
                // 当前密码、新密码、确认新密码为空，只更新用户名和电话号码
                updateUserInfo(username,phone,imgUrl,null);
            } else {
                // 当前密码、新密码、确认新密码非空
                if (!currentPwd || !newPwd || !confirmPwd) {
                    layer.msg('当前密码、新密码和确认新密码都不能为空');
                    return;
                }
                if (newPwd!==confirmPwd) {
                    layer.msg('新密码和确认新密码不一致');
                    return;
                }
                // 验证当前密码是否正确
                $.ajax({
                    url: 'user/verifyPassword',
                    data: {password:currentPwd},
                    success: function (result) {
                        if (result) {
                            updateUserInfo(username,phone,imgUrl,newPwd);
                        } else {
                            layer.msg('当前密码不正确');
                        }
                    }
                });
            }
        });
        //更新用户信息函数
        function updateUserInfo(username,phone,imgUrl,newPwd) {
            const data = {
                username: username,
                phone: phone,
                headpicture:imgUrl
            };
            if (newPwd) {
                data.password = newPwd;
            }
            $.ajax({
                url: 'user/edit',
                data: data,
                success: function () {
                    layer.msg('信息更新成功');
                },
                error: function () {
                    layer.msg('信息更新失败');
                }
            });
        }

    </script>
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->


    <script src="front/js/popper.min.js"></script>
    <script src="front/js/bootstrap.min.js"></script>
    <script src="front/js/jquery-3.6.0.min.js"></script>
    <script src="front/js/jquery-migrate-3.3.2.min.js"></script>
    <script src="front/js/modernizr-3.11.2.min.js"></script>



    <!-- Plugins JS -->


    <script src="front/js/aos.min.js"></script>
    <script src="front/js/jquery.ajaxchimp.min.js"></script>
    <script src="front/js/jquery-ui.min.js"></script>
    <script src="front/js/nice-select.min.js"></script>
    <script src="front/js/swiper-bundle.min.js"></script>
    <script src="front/js/countdown.min.js"></script>
    <script src="front/js/lightgallery-all.min.js"></script>



    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <!-- 
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> 
    -->

    <!--Main JS-->
    <script src="front/js/main.js"></script>
</body>

</html>